<script setup>
import { ref } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import zhLocale from '@fullcalendar/core/locales/zh-cn'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
const props = defineProps({
  dataView: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const handleDateSelect = () => {}
const handleEventClick = (item) => {
  console.log(item)
}
const handleEvents = (events) => {}
const showArg = (views) => {
  console.log(views)
}
const calendarOptions = ref({
  locale: zhLocale,
  plugins: [dayGridPlugin, timeGridPlugin],
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,dayGridDay'
  },
  views: {
    timeGridWeek: {
      allDaySlot: false
    }
  },
  initialView: 'dayGridMonth',
  events: props.dataView,
  dayMaxEvents: true,
  weekends: true,
  select: handleDateSelect, // 点击日期格子
  eventClick: handleEventClick, // 点击当前信息
  eventsSet: handleEvents,
  eventResize: (view) => {
    console.log(view.type)
  }
})
</script>

<template>
  <div class="full-calendar">
    <FullCalendar :options="calendarOptions">
      <template v-slot:eventContent="arg">
        <div v-show="arg.view.type == 'dayGridMonth'" class="month-list" @click="showArg(arg)">
          <el-popover placement="right" :width="200" trigger="hover">
            <template #reference>
              <div>
                早上 {{ arg.timeText }}
                <span style="padding-left: 20px">{{ arg.event.title }}</span>
              </div>
            </template>
            <ul>
              <li>{{ arg.event.title }}</li>
              <li>#{{ arg.event.extendedProps.orderNo }}</li>
              <li>早上 {{ arg.timeText }}</li>
              <li>{{ arg.event.extendedProps.type }}</li>
              <li>{{ arg.event.extendedProps.status }}</li>
            </ul>
          </el-popover>
        </div>
        <div v-show="arg.view.type == 'timeGridWeek'">
          <ul>
            <li>{{ arg.event.title }}</li>
            <li>#{{ arg.event.extendedProps.orderNo }}</li>
            <li>早上 {{ arg.timeText }}</li>
            <li>{{ arg.event.extendedProps.type }}</li>
            <li>{{ arg.event.extendedProps.status }}</li>
          </ul>
        </div>
        <div v-show="arg.view.type == 'dayGridDay'">
          <ul>
            <li>{{ arg.event.title }}</li>
            <li>#{{ arg.event.extendedProps.orderNo }}</li>
            <li>早上 {{ arg.timeText }}</li>
            <li>{{ arg.event.extendedProps.type }}</li>
            <li>{{ arg.event.extendedProps.status }}</li>
          </ul>
        </div>
      </template>
    </FullCalendar>
  </div>
</template>

<style lang="scss">
.full-calendar {
  padding: 20px;
}
.fc-direction-ltr .fc-timegrid-col-events {
  margin: 0;
}
.fc .fc-timegrid-slot {
  height: 1.8em;
}
.fc .fc-button {
  padding: 0.2em 0.4em !important;
}
.month-list {
  border: 1px #ccc solid;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding: 0 5px;
  width: 100%;
  background-color: #3788d8;
  border-radius: 4px;
  &:hover {
    background-color: none;
  }
}
h2 {
  margin: 0;
  font-size: 16px;
}

ul {
  margin: 0;
  padding: 0;
}
</style>
